<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>监听子组件事件</title>
    <link rel="stylesheet" href="emit-event.css">
    <!-- 导入Vue核心库 -->
    <script src="vue@3.2.26.js"></script>
</head>
<body>

    <h3>监听子组件事件</h3>

    <div class="cart" id="cart">
        <!-- 在父组件中监听子组件的事件(自定义事件) -->
        <cart-item v-for="p in products" v-bind:key="p.id" v-bind:product="p" 
                   v-on:reduce="handleReduce" v-on:increase="handleIncrease"></cart-item>
        <!-- 如果某个 prop attribute 有多个单词，则使用时使用 - 隔开 -->
        <total :total-price="total"></total>
    </div>

    <!-- 导入自定义的 JavaScript 脚本 -->
    <script src="emit-event.js" ></script>
    
</body>
</html>